import React, { PureComponent } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import router from 'umi/router';
import { Card, Row, Col, List, Button, Icon } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ArticleType } from '@/domains/article';
import { Loading } from '@/models/connect';
import { StateType } from './model';
import ArticleList from '@/components/ArticleList';
import Article from '@/components/Article';
import styles from './index.less';

interface State {
  articleContent: StateType;
  loading: Loading;
}

interface ArticleContentProps {
  dispatch: Dispatch;
  articleContent: StateType;
  loading: boolean;
  location: any;
}

interface ArticleContentState {}

@connect(({ articleContent, loading }: State) => ({
  articleContent,
  loading: loading.models.articleContent,
}))
class ArticleContent extends PureComponent<ArticleContentProps, ArticleContentState> {
  state = {
    showLastest: true,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'articleContent/clearArticle' });
    this.loadData();
  }

  loadData = (time?: string) => {
    const { dispatch, location } = this.props;
    dispatch({ type: 'articleContent/fetchArticleList' });
    const {
      query: { data },
    } = location;
    const payload = time || data;
    payload && dispatch({ type: 'articleContent/fetchArticle', payload });
  };

  fetchArticle = (article: ArticleType) => {
    const { location } = this.props;
    const { pathname } = location;
    const { time } = article;
    const data = time.replace(/:/g, '_');
    router.replace({ pathname, query: { data } });
    this.loadData(data);
  };

  render() {
    const { articleContent, loading } = this.props;
    const { showLastest } = this.state;
    const { articleList, article } = articleContent;
    return (
      <PageHeaderWrapper title={false}>
        {!showLastest && (
          <Button
            type="primary"
            shape="round"
            className={styles.showLastestBtn}
            onClick={() => this.setState({ showLastest: true })}
          >
            显示
            <Icon type="double-right" />
          </Button>
        )}
        <Row gutter={24}>
          {showLastest && (
            <Col lg={7} md={24}>
              <Card loading={loading} bordered={false} style={{ marginBottom: 24 }}>
                <List
                  size="small"
                  rowKey="time"
                  className={styles.lastestList}
                  dataSource={articleList.slice(0, 5)}
                  header={
                    <div className={styles.lastestHeader}>
                      <span style={{ fontWeight: 'bold' }}>最新笔记</span>
                      <Button type="link" onClick={() => this.setState({ showLastest: false })}>
                        隐藏
                      </Button>
                    </div>
                  }
                  renderItem={item => (
                    <List.Item>
                      <List.Item.Meta
                        title={<a onClick={() => this.fetchArticle(item)}>{item.title}</a>}
                        description={item.time.split(' ')[0]}
                      />
                    </List.Item>
                  )}
                />
              </Card>
            </Col>
          )}
          <Col lg={showLastest ? 17 : 24} md={24}>
            <Card className={styles.tabsCard} loading={loading} bordered={false}>
              {article ? (
                <Article data={article} />
              ) : (
                <ArticleList data={articleList} itemClick={this.fetchArticle} />
              )}
            </Card>
          </Col>
        </Row>
      </PageHeaderWrapper>
    );
  }
}

export default ArticleContent;
